<template>
  <div class="order-guide">
    <h1 class="title"> Meet50off Ordering Guide </h1>
    <h2>
      Welcome to use Meet50off to place an order. In order to give you a good shopping experience, please follow the guide below to place an order. We want you to be happy with your purchases.
    </h2>
    <div class="step">
      <h2 class="red">
        <span>Step 1:</span>Log in to the ordering system at <router-link to="/" style="color: blue">https://meet50off.com</router-link> and search the product you want to purchase.
      </h2>
      <ul>
        <li>
          Method 1: Keyword searching
          <img src="./order-img/image001.png" alt="">
        </li>
        <li>
          Method 2: Finding products by product category
          <img src="./order-img/image002.png" alt="">
        </li>
      </ul>
    </div>
    <div class="step">
      <h2 class="red">
        <span>Step 2:</span> After selecting a product that you wish to purchase, you should add that item to the shopping cart.
      </h2>
      <img src="./order-img/image003.png" alt="">
      <p>And then please sign in to your Amazon account within the specified time to place an order.</p>
      <img src="./order-img/image004.png" alt="">
    </div>
    <div class="step">
      <h2 class="red">
        <span>Step 3:</span> After the order is completed, return to the Meet50off ordering system to fill in your real and valid Amazon order number and your Paypal account. The seller will send the product for you after confirming that the information is correct. Cash back will be credited to your account within 48 hours of your confirmation of receipt.
      </h2>
      <img src="./order-img/image005.png" alt="">
    </div>
    <div class="step">
      <h2 class="red">
        <span>Step 3:</span> After the order is completed, return to the Meet50off ordering system to fill in your real and valid Amazon order number and your Paypal account. The seller will send the product for you after confirming that the information is correct. Cash back will be credited to your account within 48 hours of your confirmation of receipt.
      </h2>
      <img src="./order-img/image005.png" alt="">
    </div>
    <div class="step">
      <h2 class="red">
        <span>Step 4:</span> The order may be rejected due to the incorrect information you filled in.
      </h2>
      <p class="blue">For rejected orders, you can see them in the unable to confirm list.</p>
      <img src="./order-img/image006.png" alt="">
      <p class="blue">You can re-fill in your order number and Paypal information and submit the order again.</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "orderGuide"
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .order-guide{
    width: 100%;
    margin:40px 0;
  }
  .red {
    color: red
  }
  .blue{
    color: #1e90ff
  }
  h2{
    font-size: 20px;
    margin-bottom: 30px;
  }
  h3{
    font-size: 16px;
    line-height: 20px;
    color:rgb(117, 120, 123);
  }
  h3 b{
    color: #000;
  }
  .order-guide .title{
    width: 100%;
    text-align: left;
    font-size: 30px;
    font-weight: bolder;
    margin-bottom: 40px;
  }
  li{
    margin-bottom: 30px;
    color: #1e90ff;
  }
  img{
    max-width: 1080px
    margin: 20px 0px
  }
</style>
